<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="asscerts/css/productDetails.css" rel="stylesheet">
    <script src="asserts/js/vue.js"></script>
    <script src="asserts/js/index.js"></script>
    <link rel="stylesheet" href="asserts/css/index.css">
    <link href="asscerts/bootstrap-3.4.1-dist/css/bootstrap.css" rel="stylesheet">
    <script src="asserts/js/jquery-2.1.1.min.js"></script>
    <script src="asscerts/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<body onload="getProvince()">
<div id="app">
    <div class="box">
        <div class="head">
            <!-- 头部导航栏 -->
            <nav class=" navbar-inverse navbar-fixed-top">
                <div class="container-fluid">
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class=""><a href="./userIndex4.html"
                                            style="padding-top: 0px;margin-top: 7px;margin-left: 150px">淘贝首页</a></li>
                            <li><a href="#" style="padding-top: 0px;margin-top: 7px">问题反馈</a></li>
                            <li><a href="./store/index.html" style="padding-top: 0px;margin-top: 7px">卖家中心</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-haspopup="true" aria-expanded="false"
                                   style="padding-top: 7px;margin-top: 0px;height: 35px;">商品分类 <span
                                        class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">数码电子</a></li>
                                    <li><a href="#">食品</a></li>
                                    <li><a href="#">生活用品</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">服装 | 男装 | 女装</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">厨具用品</a></li>
                                </ul>
                            </li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a href="#" v-if="user == null" @click="loginVisible = true" class="a2"
                                   data-toggle="modal" data-target="#exampleModal" style="padding-top: 7px;">亲，请登录</a>
                                <a href="#" v-else @click="toInfo" class="a2" data-toggle="modal"
                                   style="padding-top: 7px;" data-target="#exampleModal">欢迎您，{{user.username}}</a>
                            </li>
                            <li>
                                <a v-if="user == null" href="./register.html" style="padding-top: 7px;margin-top: 0px;">注册</a>
                                <a v-else @click="logout"
                                   style="padding-top: 7px;margin-top: 0px;cursor: pointer">注销</a>
                            </li>
                            <li><a href="#" @click="cartBtn" class="gouwu" data-toggle="modal"
                                   data-target="#exampleModal" id="a3"
                                   style="padding-top: 7px;margin-top: 0px;height: 35px;margin-right: 150px">购物车(<span
                                    id="nums" style="color: #eb9e9b">{{cartNumber}}</span>)</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        <div class="box-1">

            <div class="box-1-1">
                <div class="showImg">
                    <div class="out">
                        <ul class="img">

                        </ul>
                        <ul class="num">

                        </ul>
                        <input class="left btn" type="button" value="<">
                        <input class="right btn" type="button" value=">">
                    </div>
                </div>
            </div>

            <div class="box-1-2">
                <div class="context">

                </div>

                <div class="box-price">
                    <span class="span">价格</span>
                    <div class="price">
                        <strong>
                            <span>￥</span>
                            <span id="price">6666</span>
                        </strong>
                    </div>
                    <div class="discount">
                        <span>满500减50</span>
                        <span onclick="disBuy(this)" class="disBuy">领券购买</span>
                    </div>
                    <div class="sale">
                        <strong id="sale">99</strong>
                        <span>已交易</span>
                    </div>
                </div>

                <div class="box-address">
                    <div class="address">
                        <div style="float: left">
                            <span class="span">配送</span>
                            <span class="span"> 广州千锋至</span>
                        </div>

                        <div class="chooseAddress">
                            <div id='province'>
                                <select>
                                    <option>省份</option>
                                </select>
                            </div>
                            <div id='city'>
                                <select>
                                    <option>城市</option>
                                </select>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="type">
                    <dt>颜色分类</dt>
                    <div class="small-img">

                    </div>
                </div>

                <div class="box-num">
                    <dt>数量</dt>
                    <div class="quantity-form">
                        <a href="javascript:void(0)" class="decrement">-</a>
                        <input type="text" v-model="productNumber" id="numsP" class="itxt"/>
                        <a href="javascript:void(0)" class="increment">+</a>

                    </div>

                </div>

                <div class="box-button">
                    <div>
                        <div @click="addOrder" class="but1" id="buy"><a>立即购买</a></div>
                        <div class="but2" @click="addProductToCart" id="add1"><a class="iconfont icon-gouwuchekong"
                                                       style="width: 106px;">加入购物车</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="box-1-3">
                <div class="logo"><img id="store-logo" src="asserts/img/11.jpg"></div>
                <div class="storeInfo">
                    <div class="store-name">店铺名：<span id="store-name"></span></div>
                    <div class="user-name">店家：<span id="user-name"></span></div>
                    <div class="user-tel">联系：<span id="user-tel"></span></div>
                    <div class="user-name">资金：9999999999</div>
                </div>
            </div>

        </div>
        <div class="box-2">

            <div id="box-2-1"><img src="asserts/img/long.jpeg"></div>
            <div class="box-2-2">
                <ul>
                    <li><p id="1" class="btn2">商品详情</p></li>
                    <li><p id="2" class="btn1">评价<span class="comment-num">(99)</span></p></li>
                    <li><p id="3" class="btn1">服务</p></li>
                </ul>
                <div class="box1" id="box1">

                </div>
                <div class="box1" id="box2">

                </div>
                <div class="box1" id="box3">
                    <video style="width: 391px;margin-left: 280px;" src="http://www.w3school.com.cn/i/movie.ogg"
                           controls="controls"/>

                </div>
            </div>
        </div>
        <div class="footer">
            <div class="same footer_item">
                <div class="footer_top">
                    <ul>
                        <li>
                            <span></span>
                            <a href="">移动版</a></li>
                        <li><a href="">关于我们</a></li>
                        <li><a href="">用户协议</a></li>
                        <li><a href="">隐私政策</a></li>
                        <li><a href="">侵权申诉</a></li>
                        <li><a href="">企业服务</a></li>
                        <li><a href="">帮助中心</a></li>
                        <li><a href="">联系我们</a></li>
                        <li><a href="">中文</a></li>
                        <li><a href="">English</a></li>
                    </ul>
                    <div class="icon_outside">
                        <ul>
                            <li><a href=""><span class="iconfont icon-weixin"></span></a></li>
                            <li><a href=""><span class="iconfont icon-weibo"></span></a></li>
                        </ul>
                    </div>
                </div>
                <div class="footer_bottom">
                    <p>京公网安备11010502000501号|淘呗经营许可证（京）字第06990号|京ICP备11017824号-4
                        |京ICP证130164号|人力资源服务许可证
                    </p>
                    <p>
                        营业执照|网上有害信息举报专区|不良信息举报电话：010-56538658
                        |举报邮箱 jubao@taobei.com.cn|
                        青少年举报邮箱 teenager@taobei.com.cn
                        |联系电话：010-56538600
                    </p>

                </div>
            </div>
        </div>
    </div>


    <!-- 登录弹框 -->
    <el-dialog
            title="登录"
            :visible.sync="loginVisible"
            width="30%"
            :before-close="handleClose"
            :close-on-click-modal="false">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="手机号登录" name="first">
                <!-- 手机号登录表单 -->
                <el-form :rules="loginRules" ref="loginForm" :model="loginForm" label-width="80px">
                    <el-form-item prop="tel" label="手机号">
                        <el-input style="width: 50%" v-model="loginForm.tel"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密码">
                        <el-input type="password" style="width: 50%" v-model="loginForm.password"></el-input>
                    </el-form-item>
                    <el-form-item prop="verifyCode" label="验证码">
                        <el-input v-model="loginForm.verifyCode" style="width: 50%"></el-input>
                        <img style="height: 50px;width: 120px" @click="flushCode" :src="codeUrl" />
                    </el-form-item>
                    <el-form-item>
                        <div>{{loginMsg}}</div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="telLogin">登录</el-button>
                        <el-button @click="loginVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="邮箱验证登录" name="second">
                <!-- 邮箱登录表单 -->
                <el-form :rules="emailRules" ref="emailLoginForm" :model="emailLoginForm" label-width="80px">
                    <el-form-item prop="tel" label="手机号">
                        <el-input style="width: 50%" v-model="emailLoginForm.tel"></el-input>
                    </el-form-item>
                    <el-form-item prop="code" label="验证码">
                        <el-input v-model="emailLoginForm.code" style="width: 50%"></el-input>
                        <el-button @click="getVerifyCode" v-if="countFlag" style="width: 40%">发送验证码</el-button>
                        <el-button v-else style="width: 40%">剩余{{countNum}}发送</el-button>
                    </el-form-item>
                    <el-form-item>
                        <div>{{emailMsg}}</div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="emailLogin">登录</el-button>
                        <el-button @click="loginVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>

            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</div>
<script src="asserts/js/jquery-2.1.1.min.js">
</script>
<script>

    //使用Vue渲染数据
    const vm = new Vue({
        el: '#app',
        data: {
            emailMsg: '',
            loginMsg: '',
            codeUrl: '/taobei_web/user/verifyCode',
            cartNumber: 0,
            loginVisible: false,
            loginForm: {
                tel: '',
                password: '',
                verifyCode: ''
            },
            emailLoginForm: {
                tel: '',
                code: ''
            },
            countNum: 180, // 倒计时秒数
            countFlag: true,
            loginRules: {
                tel: [{required: true, message: "请输入手机号", trigger: "blur"}],
                password: [{required: true, message: "请输入密码", trigger: "blur"}],
                verifyCode: [{required: true, message: "请输入验证码", trigger: "blur"}]
            },
            emailRules: {
                tel: [{required: true, message: "请输入手机号", trigger: "blur"}],
                code: [{required: true, message: "请输入验证码", trigger: "blur"}]
            },
            activeName: 'first',
            productNumber: 1
        },
        methods: {
            addOrder() {
                var zj = 0;
              //点击立即购买时先判断是否已经登录
                if(this.user == null){
                    //没登陆，提示用户登录
                    this.loginVisible = true
                }else{
                    let self = this;
                    // 已经登录，发起订单请求
                    $.ajax({
                        url: 'order/addOrderByUserId',
                        data: {
                            productNum: self.productNumber,
                        },
                        type:"get",
                        dataType: 'json',
                        success(res) {
                            if (res.status == 200){
                                console.res
                                // 订单生成成功，跳转到订单详情页面
                                location.href = "userOrderDetails.html?id="+res.data.id;
                            }
                        }
                    })
                }
            },
            handleClick(){

            },
            addProductToCart() {
                //先校验是否已经登录
                if (this.user == null){
                    //没登陆先提示让用户登录
                    this.loginVisible = true
                }else{
                    //登录过了就可以直接加入购物车
                    $.ajax({
                        url: "/taobei_web/cart/addCartProduct",
                        data: {
                            number: $("#numsP").val()
                        },
                        type: "post",
                        dataType: "json",
                        success: function (respBean) {
                            if (respBean.status == 200) {
                                alert(respBean.msg)
                                location.reload()
                            }
                        }
                    })
                }
            },
            cartBtn() {
                //先判断是否已经登录，如果没登录，显示弹框让用户登录
                if (JSON.parse(window.sessionStorage.getItem("user")) == null){
                    //未登录
                    this.loginVisible =  true;
                }else{
                    //登录了就跳转到购物车页面
                    location.href = "./cart.html"
                }
            },
            initCartNumber() {
                let self = this;
                $.ajax({
                    url:"/taobei_web/cart/getCartSum",
                    type:"get",
                    dataType:"json",
                    success:function (data) {
                        if (data.status == 200) {
                            self.cartNumber = data.data.nums
                        }
                    }
                })
            },
            logout() {
                //清除本地存储的用户信息
                window.sessionStorage.removeItem("user")
                //重新初始化购物车商品数量
                this.cartNumber = 0
                //发请求让服务器清除session中保存的用户信息
                $.ajax({
                    url: '/taobei_web/user/logout',
                    type: 'get',
                    dataType: 'json',
                    success(data) {
                        if (data.status == 200){
                            //重新刷新首页
                            location.reload()
                        }
                    }
                })
            },
            toInfo() {
                //跳转到个人中心页面
                location.href = './info4.html'
            },
            flushCode() {
                //刷新验证码
                this.codeUrl = "/taobei_web/user/verifyCode?t"+new Date().getSeconds()
            },
            telLogin() {
                //先判断表单是否符合条件
                this.$refs['loginForm'].validate(valid => {
                    if (valid){
                        //表单验证通过发起登录请求
                        //手机号登录
                        let self = this;
                        $.ajax({
                            url: '/taobei_web/user/login',
                            type: 'post',
                            dataType: 'json',
                            data: self.loginForm,
                            success(data) {
                                if (data.status == 200){
                                    //登录成功，将用户信息保存到本地
                                    window.sessionStorage.setItem("user", JSON.stringify(data.data));
                                    //获取购物车商品数量显示
                                    self.initCartNumber()
                                    //弹出框隐藏
                                    self.loginVisible = false
                                    //重新加载首页，刷新显示用户名
                                    location.reload()
                                }else{
                                    //将错误信息提示给用户看
                                    self.loginMsg = data.msg
                                }
                            }
                        })
                    }
                })
            },
            emailLogin() {
                let self = this;
                //邮箱验证登录
                $.ajax({
                    url: '/taobei_web/user/emailLogin',
                    type: 'post',
                    dataType: 'json',
                    data: self.emailLoginForm,
                    success(data) {
                        if (data.status == 200){
                            //登录成功，将用户信息保存到本地
                            window.sessionStorage.setItem("user", JSON.stringify(data.data));
                            //获取购物车商品数量显示
                            self.initCartNumber()
                            //弹出框隐藏
                            self.loginVisible = false
                            //重新进入首页
                            // location.href = './userIndex3.html'
                            location.reload()
                        }else{
                            self.emailMsg = data.msg
                            //提示用户错误信息
                        }
                    }
                })
            },
            handleClose(done) {
                // this.$refs['loginForm'].resetField();
                // this.$refs['emailLoginForm'].resetField();
                done()
            },
            monitor () {//监听关闭页面之后重新打开是否改继续倒计时
                let LocalDelay = this.getLocalDelay()
                let timeLine = parseInt((new Date().getTime() - LocalDelay.time) / 1000)
                if (timeLine > LocalDelay.delay) {
                    console.warn('倒计时过期')
                } else {
                    this.countFlag = false
                    this.countNum = LocalDelay.delay - timeLine
                    let timer = setInterval(() => {
                        if (this.countNum > 1) {
                            this.countNum--
                            this.setLocalDelay(this.countNum)  //设置每一次还需倒计时
                        } else {
                            clearInterval(timer)
                            this.countFlag = true
                        }
                    }, 1000)
                }
            },
            countDown () {
                if (this.countFlag) {
                    this.countFlag = false
                    this.countNum = 180
                    let timer = setInterval(() => {
                        if (this.countNum > 1) {
                            this.countNum--
                            this.setLocalDelay(this.countNum)
                        } else {
                            clearInterval(timer)
                            this.countFlag = true
                        }
                    }, 1000)
                } else {
                    return false
                }
            },
            setLocalDelay (delay) {
                // location.href作为页面的唯一标识，可能一个项目中会有多个验证码。
                localStorage.setItem('delay_' + location.href, delay)
                localStorage.setItem('time_' + location.href, new Date().getTime())
            },
            getLocalDelay () {
                let LocalDelay = {
                    delay: localStorage.getItem('delay_' + location.href),
                    time : localStorage.getItem('time_' + location.href)
                }
                return LocalDelay
            },
            getVerifyCode () {
                let self = this;
                //获取验证码
                $.ajax({
                    url: '/taobei_web/user/loginCode',
                    type: 'get',
                    dataType: 'json',
                    data: {
                        tel: self.emailLoginForm.tel
                    },
                    success(data) {

                    }
                })
                if (this.countFlag) {
                    this.countDown() // 倒计时函数
                }
            },
        },
        computed: {
            user() {
                return JSON.parse(window.sessionStorage.getItem("user"))
            }
        },
        mounted() {
            //页面加载初始化购物车中商品数量
            this.initCartNumber()
        }
    })


    //获取城市
    var city;
    city = new Array(34);
    city[0] = new Array(19);
    city[0][0] = "北京";
    city[0][1] = "东城";
    city[0][2] = "西城";
    city[0][3] = "宣武";
    city[0][4] = "朝阳";
    city[0][5] = "崇文";
    city[0][6] = "海淀";
    city[0][7] = "丰台";
    city[0][8] = "石景山";
    city[0][9] = "通州";
    city[0][10] = "平谷";
    city[0][11] = "顺义";
    city[0][12] = "怀柔";
    city[0][13] = "密云";
    city[0][14] = "延庆";
    city[0][15] = "昌平";
    city[0][16] = "门头沟";
    city[0][17] = "房山";
    city[0][18] = "大兴";
    city[1] = new Array(12);
    city[1][0] = "上海";
    city[1][1] = "近郊";
    city[1][2] = "闵行";
    city[1][3] = "浦东";
    city[1][4] = "南汇";
    city[1][5] = "奉贤";
    city[1][6] = "金山";
    city[1][7] = "松江";
    city[1][8] = "青浦";
    city[1][9] = "嘉定";
    city[1][10] = "宝山";
    city[1][11] = "崇明";
    city[2] = new Array(8);
    city[2][0] = "天津";
    city[2][1] = "塘沽";
    city[2][2] = "汉沽";
    city[2][3] = "宁河";
    city[2][4] = "静海";
    city[2][5] = "武清";
    city[2][6] = "宝坻";
    city[2][7] = "蓟县";
    city[3] = new Array(1);
    city[3][0] = "重庆";
    city[4] = new Array(14);
    city[4][0] = "内蒙古";
    city[4][1] = "呼和浩特";
    city[4][2] = "集宁";
    city[4][3] = "包头";
    city[4][4] = "临河";
    city[4][5] = "乌海";
    city[4][6] = "东胜";
    city[4][7] = "海拉尔";
    city[4][8] = "赤峰";
    city[4][9] = "锡林浩特";
    city[4][10] = "太仆寺旗";
    city[4][11] = "通辽";
    city[4][12] = "阿拉善盟";
    city[4][13] = "白城";
    city[5] = new Array(12);
    city[5][0] = "河北";
    city[5][1] = "石家庄";
    city[5][2] = "衡水";
    city[5][3] = "邢台";
    city[5][4] = "邯郸";
    city[5][5] = "沧州";
    city[5][6] = "唐山";
    city[5][7] = "廊坊";
    city[5][8] = "秦皇岛";
    city[5][9] = "承德";
    city[5][10] = "保定";
    city[5][11] = "张家口";
    city[6] = new Array(13);
    city[6][0] = "辽宁";
    city[6][1] = "沈阳";
    city[6][2] = "铁岭";
    city[6][3] = "抚顺";
    city[6][4] = "鞍山";
    city[6][5] = "营口";
    city[6][6] = "大连";
    city[6][7] = "本溪";
    city[6][8] = "丹东";
    city[6][9] = "锦州";
    city[6][10] = "朝阳";
    city[6][11] = "阜新";
    city[6][12] = "盘锦";
    city[7] = new Array(9);
    city[7][0] = "吉林";
    city[7][1] = "长春";
    city[7][2] = "吉林";
    city[7][3] = "延吉";
    city[7][4] = "通化";
    city[7][5] = "梅河口";
    city[7][6] = "四平";
    city[7][7] = "白城";
    city[7][8] = "松原";
    city[8] = new Array(9);
    city[8][0] = "黑龙江";
    city[8][1] = "哈尔滨";
    city[8][2] = "绥化";
    city[8][3] = "佳木斯";
    city[8][4] = "牡丹江";
    city[8][5] = "齐齐哈尔";
    city[8][6] = "大庆";
    city[8][7] = "北安";
    city[8][8] = "大兴安岭";
    city[9] = new Array(12);
    city[9][0] = "江苏";
    city[9][1] = "南京";
    city[9][2] = "镇江";
    city[9][3] = "常州";
    city[9][4] = "无锡";
    city[9][5] = "苏州";
    city[9][6] = "徐州";
    city[9][7] = "连云港";
    city[9][8] = "淮阴";
    city[9][9] = "盐城";
    city[9][10] = "扬州";
    city[9][11] = "南通";
    city[10] = new Array(12);
    city[10][0] = "安徽";
    city[10][1] = "合肥";
    city[10][2] = "淮南";
    city[10][3] = "蚌埠";
    city[10][4] = "宿州";
    city[10][5] = "阜阳";
    city[10][6] = "六安";
    city[10][7] = "巢湖";
    city[10][8] = "滁州";
    city[10][9] = "芜湖";
    city[10][10] = "屯溪";
    city[10][11] = "安庆";
    city[11] = new Array(14);
    city[11][0] = "山东";
    city[11][1] = "济南";
    city[11][2] = "聊城";
    city[11][3] = "德州";
    city[11][4] = "淄博";
    city[11][5] = "东营";
    city[11][6] = "潍坊";
    city[11][7] = "烟台";
    city[11][8] = "青岛";
    city[11][9] = "泰安";
    city[11][10] = "济宁";
    city[11][11] = "荷泽";
    city[11][12] = "临沂";
    city[11][13] = "枣庄";
    city[12] = new Array(12);
    city[12][0] = "浙江";
    city[12][1] = "杭州";
    city[12][2] = "绍兴";
    city[12][3] = "湖州";
    city[12][4] = "嘉兴";
    city[12][5] = "宁波";
    city[12][6] = "舟山";
    city[12][7] = "台州";
    city[12][8] = "金华";
    city[12][9] = "丽水";
    city[12][10] = "衢州";
    city[12][11] = "温州";
    city[13] = new Array(11);
    city[13][0] = "江西";
    city[13][1] = "南昌";
    city[13][2] = "九江";
    city[13][3] = "景德镇";
    city[13][4] = "上饶";
    city[13][5] = "鹰潭";
    city[13][6] = "宜春";
    city[13][7] = "萍乡";
    city[13][8] = "赣州";
    city[13][9] = "吉安";
    city[13][10] = "抚州";
    city[14] = new Array(10);
    city[14][0] = "福建";
    city[14][1] = "福州";
    city[14][2] = "南平";
    city[14][3] = "邵武";
    city[14][4] = "福安";
    city[14][5] = "厦门";
    city[14][6] = "泉州";
    city[14][7] = "漳州";
    city[14][8] = "龙岩";
    city[14][9] = "三明";
    city[15] = new Array(14);
    city[15][0] = "湖南";
    city[15][1] = "长沙";
    city[15][2] = "株洲";
    city[15][3] = "益阳";
    city[15][4] = "岳阳";
    city[15][5] = "常德";
    city[15][6] = "吉首";
    city[15][7] = "娄底";
    city[15][8] = "怀化";
    city[15][9] = "衡阳";
    city[15][10] = "邵阳";
    city[15][11] = "郴州";
    city[15][12] = "零陵";
    city[15][13] = "张家界";
    city[16] = new Array(10);
    city[16][0] = "湖北";
    city[16][1] = "武汉";
    city[16][2] = "沙市";
    city[16][3] = "黄石";
    city[16][4] = "鄂州";
    city[16][5] = "咸宁";
    city[16][6] = "襄樊";
    city[16][7] = "十堰";
    city[16][8] = "宜昌";
    city[16][9] = "恩施";
    city[17] = new Array(15);
    city[17][0] = "河南";
    city[17][1] = "郑州";
    city[17][2] = "新乡";
    city[17][3] = "安阳";
    city[17][4] = "许昌";
    city[17][5] = "漯河";
    city[17][6] = "驻马店";
    city[17][7] = "信阳";
    city[17][8] = "周口";
    city[17][9] = "平顶山";
    city[17][10] = "洛阳";
    city[17][11] = "三门峡";
    city[17][12] = "南阳";
    city[17][13] = "开封";
    city[17][14] = "商丘";
    city[18] = new Array(12);
    city[18][0] = "广东";
    city[18][1] = "广州";
    city[18][2] = "韶关";
    city[18][3] = "英德";
    city[18][4] = "梅州";
    city[18][5] = "汕头";
    city[18][6] = "惠州";
    city[18][7] = "深圳";
    city[18][8] = "湛江";
    city[18][9] = "茂名";
    city[18][10] = "肇庆";
    city[18][11] = "佛山";
    city[19] = new Array(9);
    city[19][0] = "广西";
    city[19][1] = "南宁";
    city[19][2] = "百色";
    city[19][3] = "钦州";
    city[19][4] = "玉林";
    city[19][5] = "桂林";
    city[19][6] = "梧州";
    city[19][7] = "柳州";
    city[19][8] = "河池";
    city[20] = new Array(8);
    city[20][0] = "贵州";
    city[20][1] = "贵阳";
    city[20][2] = "六盘水";
    city[20][3] = "玉屏";
    city[20][4] = "凯里";
    city[20][5] = "都匀";
    city[20][6] = "安顺";
    city[20][7] = "遵义";
    city[21] = new Array(16);
    city[21][0] = "四川";
    city[21][1] = "成都";
    city[21][2] = "乐山";
    city[21][3] = "凉山";
    city[21][4] = "渡口";
    city[21][5] = "绵阳";
    city[21][6] = "汶川";
    city[21][7] = "雅安";
    city[21][8] = "甘孜";
    city[21][9] = "广元";
    city[21][10] = "南充";
    city[21][11] = "达州";
    city[21][12] = "内江";
    city[21][13] = "自贡";
    city[21][14] = "宜宾";
    city[21][15] = "泸州";
    city[22] = new Array(13);
    city[22][0] = "云南";
    city[22][1] = "昆明";
    city[22][2] = "曲靖";
    city[22][3] = "昭通";
    city[22][4] = "开远";
    city[22][5] = "文山";
    city[22][6] = "思茅";
    city[22][7] = "大理";
    city[22][8] = "楚雄";
    city[22][9] = "临沧";
    city[22][10] = "保山";
    city[22][11] = "六盘水";
    city[22][12] = "渡口";
    city[23] = new Array(11);
    city[23][0] = "陕西";
    city[23][1] = "西安";
    city[23][2] = "渭南";
    city[23][3] = "延安";
    city[23][4] = "绥德";
    city[23][5] = "榆林";
    city[23][6] = "宝鸡";
    city[23][7] = "汉中";
    city[23][8] = "安康";
    city[23][9] = "商洛";
    city[23][10] = "铜川";
    city[24] = new Array(13);
    city[24][0] = "甘肃";
    city[24][1] = "兰州";
    city[24][2] = "武威";
    city[24][3] = "张掖";
    city[24][4] = "酒泉";
    city[24][5] = "安西";
    city[24][6] = "金昌";
    city[24][7] = "天水";
    city[24][8] = "定西";
    city[24][9] = "平凉";
    city[24][10] = "西峰";
    city[24][11] = "陇西";
    city[24][12] = "甘南";
    city[25] = new Array(5);
    city[25][0] = "宁夏";
    city[25][1] = "银川";
    city[25][2] = "吴忠";
    city[25][3] = "石咀山";
    city[25][4] = "固原";
    city[26] = new Array(7);
    city[26][0] = "青海";
    city[26][1] = "西宁";
    city[26][2] = "果洛";
    city[26][3] = "玉树";
    city[26][4] = "格尔木";
    city[26][5] = "海西";
    city[26][6] = "阿坝";
    city[27] = new Array(11);
    city[27][0] = "新疆";
    city[27][1] = "乌鲁木齐";
    city[27][2] = "石河子";
    city[27][3] = "乌苏";
    city[27][4] = "克拉玛依";
    city[27][5] = "伊宁";
    city[27][6] = "吐鲁番";
    city[27][7] = "哈密";
    city[27][8] = "巴音郭楞";
    city[27][9] = "阿克苏";
    city[27][10] = "喀什";
    city[28] = new Array(8);
    city[28][0] = "西藏";
    city[28][1] = "拉萨";
    city[28][2] = "那曲";
    city[28][3] = "昌都";
    city[28][4] = "山南";
    city[28][5] = "日喀则";
    city[28][6] = "阿里";
    city[28][7] = "林芝";
    city[29] = new Array(4);
    city[29][0] = "海南";
    city[29][1] = "海口";
    city[29][2] = "三亚";
    city[29][3] = "海南";
    city[30] = new Array(12);
    city[30][0] = "山西";
    city[30][1] = "太原";
    city[30][2] = "离石";
    city[30][3] = "忻州";
    city[30][4] = "宁武";
    city[30][5] = "大同";
    city[30][6] = "临汾";
    city[30][7] = "侯马";
    city[30][8] = "运城";
    city[30][9] = "阳泉";
    city[30][10] = "长治";
    city[30][11] = "晋城";
    city[31] = new Array(17);
    city[31][0] = "台湾";
    city[31][1] = "台北";
    city[31][2] = "台中";
    city[31][3] = "基隆";
    city[31][4] = "台南";
    city[31][5] = "嘉义";
    city[31][6] = "桃园";
    city[31][7] = "苗粟";
    city[31][8] = "屏东";
    city[31][9] = "南投";
    city[31][10] = "花莲";
    city[31][11] = "新竹";
    city[31][12] = "彰化";
    city[31][13] = "高雄";
    city[31][14] = "宜兰";
    city[31][15] = "台东";
    city[31][16] = "彭湖";
    city[32] = new Array(1);
    city[32][0] = "香港";
    city[33] = new Array(1);
    city[33][0] = "澳门";

    function getRegion() {
        document.getElementById("city").innerHTML = "";
        var provinces = document.getElementById("provinces");
        var prov = provinces[provinces.selectedIndex].value;
        var str = "<select>";

        for (var i = 0; i < city[prov].length; i++) {
            str = str + "<option>" + city[prov][i] + "</option>";
        }
        str = str + "</select>";
        document.getElementById("city").innerHTML = str;
    }


    function getProvince() {
        var strs = "<select onchange='getRegion()' id='provinces'><option></option>";
        for (var i = 0; i <= 33; i++) {
            strs = strs + "<option value=" + i + ">" + city[i][0] + "</option>";
        }
        strs = strs + "</select>";
        document.getElementById('province').innerHTML = strs;
    }


</script>
<script>
    var Price;
    let discountPrice;

    $(function () {
        $("#div1").hide();
        $("#diva").hide();
        $.ajax({
            url: "/taobei_web/cart/getCartSum",
            type: "get",
            dataType: "json",
            success: function (respBean) {
                if (respBean.status == 200) {
                    $("#add1").attr("onclick", "check()")
                } else {
                    $("#add1").attr("onclick", "check1()")
                }
            }
        })
        $("#sub2").click(function () {
            $("#div1").slideToggle("slow");
            $("#diva").hide();
        })
        var num = 0;
        //请求数据
        $.ajax({
            url: '/taobei_web/pro/queryProductByIdForFront',
            dataType: 'json',
            type: 'get',
            success(resp) {
                console.log(resp);
                num = resp.data.pictureList.length;
                Price = resp.data.price;

                let text1 = "";
                let text2 = "";
                let text3 = "";
                let text4 = "";
                if (resp.data.pictureList.length != 0) {
                    for (let j = 0; j < resp.data.pictureList.length; j++) {
                        text1 += "<li ><img src=" + resp.data.pictureList[j].url + " alt=''></li>";
                        text2 += "<img src=" + resp.data.pictureList[j].url + ">";
                        text3 += "<div><img src=" + resp.data.pictureList[j].url + "></div>";
                    }
                }
                if (resp.data.commentList.length != 0) {
                    for (let j = 0; j < resp.data.commentList.length; j++) {
                        text4 += "<div class='comment-item' id=" + resp.data.store.id + ">";
                        text4 += "<div style='margin-left: 30px;color: #999;'>初次评价：</div>";
                        text4 += " <div class='c-context'>" + resp.data.commentList[j].commentContext + "</div>";
                        text4 += " <div class='c-right'>";
                        text4 += "<div class='time'>" + resp.data.commentList[j].createTime + "</div>";
                        if (resp.data.commentList[j].userList.length != 0) {
                            text4 += "<div class='username'>" + resp.data.commentList[j].userList[0].username + "</div>";
                        } else {
                            text4 += "<div class='username'>匿名用户</div>";
                        }

                        text4 += "</div>";
                        text4 += "</div>";
                    }
                }

                $(".img").html(text1);
                $(".small-img").html(text2);
                $("#box1").html(text3);
                // $(".logo").html("<img src=" + resp.data.store.imgUrl + "/>");
                $(".context").text(resp.data.context);
                $("#price").text(resp.data.price);
                $("#sale").text(resp.data.sale);
                $("#store-name").text(resp.data.store.name);
                $("#user-name").text(resp.data.user.username);
                $("#user-tel").text(resp.data.user.tel);
                $(".comment-num").text(resp.data.commentList.length);
                $("#box2").html(text4);


                //手动控制轮播图
                $(".img li").eq(0).fadeIn(300);//加载页面的时候让第一个图片显示
                $(".small-img img").eq(0).addClass("active");//给序号为1的加上红色背景


                //实现自动轮播
                var i = 0;//计时器控制数字
                // var t = setInterval(move, 1500);

                //该方法显示与序号对应的图片
                function move() {
                    if (++i == num) {
                        i = 0;
                    }
                    $(".small-img img").eq(i).addClass("active").siblings().removeClass("active");
                    $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
                }

                /* //鼠标移入后停止自动轮播
                 $(".out").hover(function () {
                     clearInterval(t);
                 }, function () {
                     t = setInterval(move, 1500);
                 });*/
                //按钮移动事件
                $(".right").click(function () {
                    move();
                });
                $(".left").click(function () {
                    i = i - 2;
                    move();
                });
                $(".small-img img").click(function () {
                    //当前的图片显示红色边框,其他的图片都隐藏边框
                    $(this).addClass("active").siblings().removeClass("active");
                    //当前数字对应的图片显示,其他图片都隐藏
                    var index = $(this).index();
                    $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
                });
                /*                for (var k = 1; k <= num; k++) {
                                    $(".num").append("<li>" + k + "</li>");
                                }
                                $(".num li").eq(0).addClass("active");*/

                $.ajax({
                    url: "/taobei_web/disc/getDiscBySid",
                    data: {
                        id: resp.data.store.id
                    },
                    dataType: "json",
                    type: 'get',
                    success(res) {
                        console.log(res);
                        let text = "";
                        if (res.data.length != 0 && res.data[0].doorSill < Price) {
                            dicountPrice = res.data[0].prePrice
                            text += "<span>res.data[0].name</span><span  onclick=\"disBuy(this)\" class=\"disBuy\">领券购买</span>"
                        }
                        $(".discount").html(text);
                    }
                })

            }
        });


        //初始化
        $('.itxt').val('1');//获取文本框的值
        //加
        $('.increment').click(function () {
            $(this).prev().val(parseInt($(this).prev().val()) + 1);
            //单击加号时候  当前节点的上一个节点的值   等于   当前节点的上一个节点的值+1
            //$(this) 当前对象
            //prev() 上一个节点
            //parseInt 把文本框中的值 转换为整型（int）  如何不转换的话 获取到的可能是字符串（string)
            //如果获取到的是字符串  ，那么 文不框中的值会是  字符串+1
        });
        //减
        $('.decrement').click(function () {
            $(this).next().val(parseInt($(this).next().val()) - 1);
            //和上面一样的
            if ($('.itxt').val() <= 1) {
                $('.itxt').val('1');//文本框中的值不能小于1  否则就等于1
            }
        });
    })

    function check() {
        $.ajax({
            url: "/taobei_web/cart/addCartProduct",
            data: {
                number: $("#numsP").val()
            },
            type: "post",
            dataType: "json",
            success: function (respBean) {
                if (respBean.status == 200) {
                    alert(respBean.msg)
                    location.reload()
                }
            }
        })
    }

    function check1() {
        $("#div1").slideToggle("slow");
        $("#diva").show();
    }


    function disBuy(t) {
        {
            $(".disBuy").addClass("disBuy1");
            $(".disBuy").text("已领券");
            $("#price").text(parseInt(Price) - dicountPrice);
        }
    }
</script>
<script>
    $(function () {
        var arr = document.getElementsByTagName('p');
        for (var i = 0; i < arr.length; i++) {
            arr[i].onclick = function () {
                if (this.id == '1') {
                    document.getElementById("box1").style.display = 'block';
                    document.getElementById("box2").style.display = 'none';
                    document.getElementById("box3").style.display = 'none';
                } else if (this.id == '2') {
                    document.getElementById("box1").style.display = 'none';
                    document.getElementById("box2").style.display = 'block';
                    document.getElementById("box3").style.display = 'none';
                } else {
                    document.getElementById("box1").style.display = 'none';
                    document.getElementById("box2").style.display = 'none';
                    document.getElementById("box3").style.display = 'block';
                }
                //this是当前激活的按钮，在这里可以写对应的操作
                if (this.className == 'btn1') {
                    this.className = 'btn2';
                    var name = this.id;
                    var btn = document.getElementsByClassName('btn2');
                    for (var j = 0; j < btn.length; j++) {
                        if (btn[j].id != name) {
                            btn[j].className = 'btn1';
                        }
                    }
                }
            }
        }
    })

</script>

</body>
</head></html>